<template>
  <div class="flex-center btn-box" style="margin-top: 10px;">
    <van-button v-for="(item, index) in btnList" :key="index" class="btnright" @click="btnCli(item, index)" round
      :type="btn1 == index ? 'primary' : 'default'" size="small">{{ item.text }}</van-button>
  </div>

  <div class="flex-center" style="font-size: 12px;margin: 10px 0;position: relative;">
    <span>{{ date[0] }}</span>
    <span style="margin: 0 10px;">至</span>
    <span>{{ date[1] }}</span>
    <img src="../assets/filter.png" class="filter-img" @click="showCale" alt="">
    <!--  row-height="30" -->
    <!-- 1970-01-01 -->
    <van-calendar v-model:show="show" @confirm="onConfirm" ref="calendar" :min-date="new Date('2000-01-01')"
      :max-date="new Date()" allow-same-day :show-title="false" teleport="#app" type="range" />
  </div>
</template>
<script setup lang="ts">
import moment from 'moment';
import { reactive, defineEmits } from 'vue';
import { ref } from 'vue';
const emit = defineEmits(['change'])
let calendar = ref(null)
let showCale = () => {
  console.log('calendar', calendar.value);
  calendar.value.reset([new Date(date.value[0]), new Date(date.value[1])])
  show.value = true;

}
let btn1 = ref(0),
  btnList = reactive([{ text: '当日', type: '' }, { text: '本月', type: '' }, { text: '本季', type: '' }, { text: '本年', type: '' },])
let ranges = {
  '当日': [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
  '上月': [moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD'), moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD')],
  '本月': [moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')],
  '本季': [moment().startOf('quarter').format('YYYY-MM-DD'), moment().endOf('quarter').format('YYYY-MM-DD')],
  '本年': [moment().year(moment().year()).startOf('year').format('YYYY-MM-DD'), moment().year(moment().year()).endOf('year').format('YYYY-MM-DD')],
}
const btnCli = (item, index) => {
  btn1.value = index
  date.value = ranges[item.text]
  emit('change', date.value)
  // console.log(item, new Date('1970-01-01'));
}

const date = ref([]);
btnCli(btnList[0], 0)
// ranges['当日']
const show = ref(false);
const onConfirm = (values) => {
  date.value = values.map(element => moment(element).format('YYYY-MM-DD'));
  show.value = false;
  btn1.value = -1
  emit('change', date.value)
};
</script>
<style scoped>
.btn-box {
  font-size: 14px;
  color: #000;
}

.btn-box .van-button {
  padding: 3px 18px;
  margin: 0 8px;
  border: none;
}

.filter-img {
  margin-left: 10px;
  width: 14px;
  height: 14px;
}
</style>